<script setup lang="ts">
import dayjs from 'dayjs'
import { fetchProjectDetailAPI } from '@/apis/fetchProjectDetail'
import { fetchProjectPaymentListAPI } from '@/apis/fetchProjectPaymentList'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const loading = ref(false)

const projectId = ref('')
const project = ref<Project | null>(null)
const paymentList = ref<Payment[]>([])

onLoad(async (options) => {
  if (options && options.project_id) {
    projectId.value = options.project_id
    loading.value = true
    try {
      const projRes = await fetchProjectDetailAPI(projectId.value, userInfoStore.userInfo!.token!)
      if (projRes.data?.code === 1)
        project.value = projRes.data?.data

      const res = await fetchProjectPaymentListAPI(`${project.value!.id!}`, userInfoStore.userInfo!.token!)
      if (res.data?.code === 1)
        paymentList.value = res.data?.data
      else
        uni.showToast({ title: res.data?.msg, icon: 'none' })
    }
    catch (err) {
      uni.showToast({ title: '获取数据失败', icon: 'none' })
    }
  }
})
</script>

<template>
  <Spacer height="30" />
  <view v-for="payment in paymentList" :key="payment.id" class="flex flex-col p-30rpx mb-30rpx bg-white rounded-20rpx">
    <view class="flex justify-between items-center">
      <view class="flex items-center">
        <view class="flex justify-center items-center w-60rpx h-60rpx bg-brand rounded-20rpx mr-16rpx">
          <image class="w-36rpx h-32rpx" src="@/static/images/file.png" />
        </view>
        <view class="text-30rpx leading-30rpx text-secondary font-bold">
          {{ project?.name || '未知' }}
        </view>
      </view>
      <view class="text-24rpx leading-24rpx text-tertiary">
        {{ dayjs.unix(payment.create_time!).format('YYYY/MM/DD HH:mm') || '未知' }}
      </view>
    </view>
    <Spacer height="30" />
    <Divider />
    <Spacer height="35" />
    <view class="flex items-center">
      <view class="text-28rpx leading-28rpx text-secondary">
        打款金额：
      </view>
      <view class="text-28rpx leading-28rpx text-secondary">
        {{ payment.pay_money ? `¥${payment.pay_money}` : '未知' }}
      </view>
    </view>
    <Spacer height="30" />
    <view class="flex items-center">
      <view class="text-28rpx leading-28rpx text-secondary">
        打款日期：
      </view>
      <view class="text-28rpx leading-28rpx text-secondary">
        {{ dayjs.unix(payment.create_time!).format('YYYY/MM/DD HH:mm') || '未知' }}
      </view>
    </view>
    <Spacer height="30" />
    <view class="flex flex-col">
      <view class="text-28rpx leading-28rpx text-secondary">
        合同照片：
      </view>
      <Spacer height="24" />
      <PictureGrid mode="display" :width="630" :cols="3" :pictures="payment.pay_images!.split(',') || []" />
    </view>
    <Spacer height="30" />
    <view class="flex flex-col">
      <view class="text-28rpx leading-28rpx text-secondary">
        打款备注：
      </view>
      <Spacer height="24" />
      <ListParagraph>{{ payment.pay_desc || '无' }}</ListParagraph>
    </view>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'projectPaymentInfo'
style:
  navigationBarTitleText: '打款信息'
</route>
